<template>
    <div class="editHotKeyword">
      <el-form :model="hotKeyWordForm" :rules="hotKeyWordRules" v-loading="hotKeyWordLoading" label-width="110px" ref="hotKeyRefs" class="hotKeyCls">
        <el-form-item label="关键词名称：" prop="name">
          <el-input v-model="hotKeyWordForm.name" type="text" size="small" placeholder="请填写关键词名称"></el-input>
        </el-form-item>
        <el-form-item label="热度（点击量）：" prop="count">
          <el-input-number v-model.number="hotKeyWordForm.count" size="small" placeholder="请填写热度（点击量）" :min="1" step-strictly></el-input-number>
        </el-form-item>
        <div class="subBtnWid">
          <el-button size="mini" type="primary" @click="subHotKey('hotKeyRefs')" :loading="loadingBtn">提交</el-button>
        </div>
      </el-form>
    </div>
</template>

<script>
  import {
    getQueryEditApi,
    putHotKeywordApi,
    postHotKeywordApi
  } from '@/api/setting';

  export default {
    name: "index",
    props: {
      id: {
        type: [String, Number],
        default: 0
      },
      // 0 ==> 添加，1 ==> 编辑
      isEdit: {
        type: Number,
        default: 0
      }
    },
    data() {
      const hotKeyCount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请填写热度'));
        } else if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          callback();
        };
      };
      return {
        hotKeyWordLoading: false,
        loadingBtn: false,
        hotKeyWordRules: {
          name: [
            { required: true, message: '请填写关键词名称', trigger: 'blur' }
          ],
          count: [
            { validator: hotKeyCount, trigger: 'blur' }
          ]
        },
        hotKeyWordForm: {
          name: '',
          count: ''
        }
      };
    },
    created() {
      if (this.isEdit === 1 && this.isEdit) this.getQueryEdit(this.id);
    },
    methods: {
      // 获取指定热门关键词
      getQueryEdit(id) {
        this.$set(this, 'hotKeyWordLoading', true);
        getQueryEditApi(id).then(res => {
          const { name, count } = res;
          this.$set(this, 'hotKeyWordForm', {
            name,
            count
          });
          this.$set(this, 'hotKeyWordLoading', false);
        }).catch(() => {
          this.$set(this, 'hotKeyWordLoading', false);
        });
      },
      subHotKey(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.isEdit === 1 && this.isEdit) {
              this.$set(this, 'loadingBtn', true);
              putHotKeywordApi(this.id, this.hotKeyWordForm).then(res => {
                this.$message.success('修改成功');
                this.$emit('getHotKeyWord');
                this.$emit('close');
                this.$set(this, 'loadingBtn', false);
              }).catch(() => {
                this.$set(this, 'loadingBtn', false);
              });
            } else {
              this.$set(this, 'loadingBtn', true);
              postHotKeywordApi(this.hotKeyWordForm).then(res => {
                this.$message.success('添加成功');
                this.$emit('getHotKeyWord');
                this.$emit('close');
                this.$set(this, 'loadingBtn', false);
              }).catch(() => {
                this.$set(this, 'loadingBtn', false);
              });
            };
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
